<template>
	<view class="wrap">
		<!-- 第一个模块 -->
		<view class="sayHi">
			<view class="hi">Hi! 你好</view>
<!-- 			<image class="message" :src="getImgUrl('/img/allImgs/chat/message.svg')"
				mode="aspectFill" lazy-load="false"></image> -->
		</view>

		<!-- 第二个模块 听他说 -->
		<view class="tashuoWrap">
			<view class="text" style="padding-top: 30rpx;">漫漫人生路</view>
			<view class="textDetail">迷茫困惑听他说</view>
			<image class="tashuoImg" src="https://ctrlsoft.net.cn/app_static/hesaid/img/forum/banner.png"
			mode="aspectFill" lazy-load="false"></image>
		</view>

		<!-- 第三个模块 tabs -->
		<view class="tashuoWrap">
			<view class="tabBanner">
				<view class="text">他说手册</view>
				<view class="textDetail">他可以这样说</view>
			</view>
			<view class="tabsWrap" v-for="(item,index) in tabs1" :key="index" @click="changeUrl(index)">
				<view class="tab">
					<image class="tabImg" :src="item.itemValue" mode="aspectFill"
						lazy-load="false" />
					<view class="tabDetail">
						<view>{{ item.itemText }}</view>
						<view style="margin-left: 0;">{{ item.description }}</view>
					</view>
				</view>
				<image class="arrow" :src="getImgUrl('/img/allImgs/chat/arrows.svg')" />
			</view>
			<view class="line"></view>
			<view class="showMore" @click="morebtn">查看更多</view>
		</view>

		<!-- 第四个模块 tabs -->
		<!-- <view class="tashuoWrap">
      <view class="tabBanner2">
        <view class="text">最新上线</view>
        <view class="textDetail">来试试新功能</view>
      </view>
      <view class="tabsWrap" v-for="(item,index) in tabs2" :key="index">
        <view class="tab">
          <image class="tabImg" :src="item.img" mode="aspectFill" lazy-load="false" />
          <view class="tabDetail">
            <view>{{ item.title }}</view>
            <view style="margin-left: 0;">{{ item.detail }}</view>
          </view>
        </view>
        <image class="arrow" :src="getImgUrl('/img/allImgs/chat/arrows.svg')" />
      </view>
      <view class="line"></view>
      <view class="showMore" @click="showMore">查看更多</view>
    </view> -->
		<!-- 第四个模块 -->

		<!-- 第二个模块 听他说 -->
		<view class="tashuoWrap">
			<image style="margin-top: 0;" class="tashuoImg"
				src="https://ctrlsoft.net.cn/app_static/hesaid/img/forum/tabBanner3.png"
				mode="aspectFill" lazy-load="false"></image>
			<view class="text" style="padding-top: 30rpx;">指路明灯</view>
			<view class="textDetail" style="padding-bottom: 20rpx;">让他说成为人生路上的照明灯</view>
		</view>

		<!-- 底部tab -->
		<!-- flag等于几取决于组件页面的id -->
		<tablebox class="flex:none" flag="3"></tablebox>
	</view>
</template>
<script>
	import tablebox from '../../../components/tabBox.vue';
	import {
		notebookAPI
	} from '../../../utils/api'
	import {
		baseURL
	} from '../../../utils/baseUrl'
	import {
		imgBaseUrl
	} from '../../../utils/baseUrl'
	export default {
		components: {
			tablebox,
		},
		data() {
			return {
				baseUrl: '',
				tabs1: [],
				tabs2: [{
					img: imgBaseUrl + '/img/allImgs/chat/collect.svg',
					title: '奇门遁甲',
					detail: '教你智慧大成之道',
				}, {
					img: imgBaseUrl + '/img/allImgs/chat/divinatory.svg',
					title: '周易六十四卦',
					detail: '预测你的一生命运',
				}, ]
			}
		},
		onLoad() {
			this.baseUrl = baseURL;
			this.getTbar1()
		},
		methods: {
			async getTbar1() {
				try {
					const res = await notebookAPI();
					if (this.tabs1.length < 4) {
						let arr = res.result.manualValues.slice(0, 4)
						this.tabs1 = arr
					} else {
						this.tabs1 = res.result.manualValues
					}
				} catch (error) {

				}
			},

			// 查看更多
			showMore() {
				this.getTbar1();
			},
			changeUrl(type) {
				uni.navigateTo({
					url: `../../../subPackagesA/pages/forumList/forumList?type=${Number(type)+1}&tabs=${JSON.stringify(this.tabs1)}&run=run`
				})
			},
			// 图片渲染
			getImgUrl(image) {
				return imgBaseUrl + image;
			},
			//查看更多
			morebtn() {
				let type = 0
				const seachVls = ''
				uni.navigateTo({
					url: `../../../subPackagesA/pages/forumList/forumList?type=${Number(type)}&tabs=${JSON.stringify(this.tabs1)}&seachVls=${seachVls}`
				})
			}
		}


	};
</script>
<style lang="less">
	// 第三个模块 他说tabs
	.tashuoWrap {
		.showMore {
			width: 100%;
			height: 88rpx;
			line-height: 88rpx;
			text-align: center;
			font-weight: 400;
			color: #FF7F22;
		}

		.line {
			width: 100%;
			height: 1rpx;
			background: #E6E6E8;
		}

		.tabsWrap {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			padding: 20rpx 30rpx 20rpx 30rpx;

			.tab {
				height: 100rpx;
				display: flex;
				align-items: center;

				.tabImg {
					margin-right: 20rpx;
					width: 76rpx;
					height: 76rpx;
				}

				:first-child {
					font-size: 32rpx;
					font-family: PingFangSC-Medium, PingFang SC;
					font-weight: 500;
					color: #333333;
				}

				:nth-child(2) {
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: rgba(0, 0, 0, 0.45);
				}

			}

			.arrow {
				width: 32rpx;
				height: 32rpx;
			}
		}

		.tabBanner {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 132rpx;
			background: url('') no-repeat;
			background-size: 100% 100%;
		}

		.tabBanner2 {
			width: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			height: 132rpx;
			background: url('') no-repeat;
			background-size: 100% 100%;
		}
	}


	// 第二个模块
	.tashuoWrap {
		width: 690rpx;
		margin: 60rpx 30rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 18rpx 0rpx rgba(175, 192, 255, 0.16);
		border-radius: 16rpx;

		.text {
			margin-left: 40rpx;
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: rgba(0, 0, 0, 0.45);
		}

		.textDetail {
			margin-top: 8rpx;
			margin-left: 40rpx;
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.85);
		}

		.tashuoImg {
			margin-top: 24rpx;
			margin-bottom: -10rpx;
			width: 100%;
			height: 228rpx;
		}
	}

	// 第一块 说你好
	.sayHi {
		margin: 0 30rpx;
		display: flex;
		justify-content: space-between;

		.hi {
			font-size: 36rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #000000;
		}

		.message {
			width: 44rpx;
			height: 44rpx;
		}
	}

	.wrap {
		padding-top: 140rpx;
		width: 100%;
		height: 100%;
		background: #FBFBFB;
	}
</style>